<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header><div class="head">名画浏览后台管理</div></el-header>
        <el-container>
          <el-aside width="200px">
            <el-scrollbar height="400px" id="ss">
              <p v-for="item,index in List" :key="item" class="scrollbar-demo-item" @click="show(index)" style="cursor:pointer">{{ item }}</p>
            </el-scrollbar>
          </el-aside>
          <el-container>
            <el-main>
              <div class="router" style="display: ;">
                <ManageUser></ManageUser>
              </div>
              <div class="router" style="display: none;">
                <ManagePic></ManagePic>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import ManageUser from '@/components/ManageUser/ManageUser.vue'
import ManagePic from '@/components/ManagePic/ManagePic.vue'
export default {
  name: 'Manage',
  components: {
    ManageUser,
    ManagePic
  },
  data () {
    return {
      List: ['用户管理', '图片管理'],
      isShow0: true,
      isShow1: false
    }
  },
  methods: {
    show (i) {
      // console.log(i)
      const ary = document.querySelectorAll('#ss p')
      const router = document.querySelectorAll('.router')
      // console.log(ary[i])
      ary.forEach((item, index) => {
        if (index === i) {
          ary[i].style.backgroundColor = 'red'
        } else {
          ary[index].style.backgroundColor = '#ECF5FF'
        }
      })
      router.forEach((item, index) => {
        if (index === i) {
          router[index].style.display = ''
        } else {
          router[index].style.display = 'none'
        }
      })
    },
    init () {
      document.querySelectorAll('#ss p')[0].style.backgroundColor = 'red'
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.head{
  font-size: 30px;
  margin: auto;
  text-align: center;
}
</style>
